<template>
	<div style="padding:0 37px 0 44px">
    <div class="breadcrumb-father">
      <div class="new-breadcrumb">
        
        <router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
        <router-link :to="{path:'/firmAudit'}">{{$t('firm.companyApproval')}}</router-link>
        <span class="arrow">></span>
        <!-- <icon-svg icon-class="setting"></icon-svg> -->
        <span :title="$route.query.name">{{$route.query.name}}</span>
      </div>
    </div>

    <div class="handle_box">
        <ul class="button_box" v-if=" userPhone === '13501189583' || userPhone === '15018955912' || userPhone === '15219441946' ? false : true ">
            <li class="confirm" @click="yes(1)">
                <icon-svg icon-class="xiugai" class="icon-btn"></icon-svg>{{$t('button.Approve')}}
            </li>
            <li class="cancel" @click="yes(2)">
                <icon-svg icon-class="quxiao" class="icon-btn"></icon-svg>{{$t('cash.reject')}}
            </li>
        </ul><!-- button_box结束 -->
    </div><!-- handle_box结束 -->

    <!-- 防止表格层被遮挡 -->
    <div class="table-space-div"></div>

    <div class="table-div" id="one">
      <div class="title">{{$t('agent.CompanyInfo')}}</div>
      <ul class="content">
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Name')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy="firmAuditData.name" id="name" type="text" :readonly="true" maxlength="100" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Type')}}:</div>
          </div>
          <div class="right-div"><input v-model="firmAuditData.idType" id="idType" type="text" :readonly="true" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Address')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy="firmAuditData.address" id="address" type="text" :readonly="true" maxlength="200" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.MailAddr')}}:</div>
          </div>
          <div class="right-div"><input v-model.lazy="firmAuditData.mailingAddress" id="mailingAddress" type="text" :readonly="true" maxlength="200" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('mer.BRNo')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy="firmAuditData.registrationNumber" id="registrationNumber" type="text" :readonly="true" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" maxlength="20" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.Contact')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy="firmAuditData.contacts" id="contacts" type="text" :readonly="true" maxlength="50" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont" v-if="companyId=='2'">{{$t('mec.Email')}}*:</div>
            <div class="cont" v-else>{{$t('mec.Email')}}:</div>
          </div>
          <div class="right-div"><input v-model.lazy="firmAuditData.email" id="email" :readonly="true" maxlength="100" @blur="valiEmail()" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont" v-if="companyId=='2'">{{$t('agent.PhoneNo')}}:</div>
            <div class="cont" v-else>{{$t('agent.PhoneNo')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy="firmAuditData.phone" id="phone" type="text" :readonly="true" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" maxlength="20" class="view-input" /></div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.MobileNo')}}*:</div>
          </div>
          <div class="right-div">
              <input v-model.lazy="firmAuditData.telephone" id="telephone" type="text" :readonly="true" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" maxlength="20" class="view-input" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('search.UpperLevel1')}}*:</div>
          </div>
          <div class="right-div">
            <input v-model="firmAuditData.parentDistributorName" id="parentDistributorName" type="text" readonly="true" class="view-input" />
          </div>
        </li>
        <li class="item">
          <div class="left-div">
            <div class="cont">{{$t('agent.UpperLevelID')}}*:</div>
          </div>
          <div class="right-div"><input v-model.lazy.trim="firmAuditData.parentDistributorNumber" id="parentDistributorNumber" type="text" disabled="true" class="view-input" /></div>
        </li>
      </ul><!-- content结束 -->
    </div><!-- table-div结束 -->
				
	</div>
</template>
<script>
import { firmAuditDel, auditFirm } from 'api/firm/index';
export default {
  
  data() {
    return {
      companyId: localStorage.getItem('companyId'),
      userPhone: localStorage.getItem('phone'),
      idType: undefined,
      firmAuditData:{
        name: undefined,
        idType: undefined,
        address: undefined,
        mailingAddress: undefined,
        registrationNumber: undefined,
        contacts: undefined,
        email: undefined,
        phone: undefined,
        telephone: undefined,
        parentDistributorName: undefined,
        parentDistributorNumber: undefined
      },
      firmOldData:[],
      firmNewData:[],
      firrmNewArr:[],
      diffData:[],
      num:0,
    };
  },
  created() {
    this.firmAuditDetails(this.$route.query.firmId,this.$route.query.remarks);
    $("#z_auditManage .el-menu a li:eq(4)").addClass('is-active');
  },
  beforeRouteLeave(to,from, next){
    if(to.path === '/firmAudit'){
      next();
    } else {
      $("#z_auditManage .el-menu a li:eq(4)").removeClass('is-active');
      localStorage.removeItem('searchFirmData');
      next();
    }
  },
  methods: {
    //根据父组件传递的id查询出该公司详情
    firmAuditDetails(id,remarks) {
      firmAuditDel(id,remarks).then(res => {
        console.log(res);
        this.firmAuditData = res.value[0];
        this.firmNewData = res.value[0];
        this.firmOldData = res.value[1];
          if (res.value.length === 1) {
            this.firmAuditData = this.firmNewData;
          } else {
            this.firmAuditData = this.firmNewData;
            this.firrmNewArr = Object.getOwnPropertyNames(this.firmNewData);
            for (let i = 0; i < this.firrmNewArr.length; i++) {
              const propName = this.firrmNewArr[i];
              if (this.firmNewData[propName] !== this.firmOldData[propName]) {
                this.num++;
                this.diffData[this.num] = document.getElementById(propName);
              }
            }
            for (let j = 0; j < this.diffData.length; j++) {
              if (this.diffData[j] != null) {
                this.diffData[j].style.color = "red";
              }
            }
					}
      });
    },
    //审核该公司
    yes(value) {

      this.firmAuditData.state = value;
      this.firmAuditData.remarks = this.$route.query.remarks;

      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: value === 2 ? (this.firmAuditData.remarks==='0'?this.$t('hint.SureToRejectTheAdditionOfThisCompany'):this.$t('hint.SureToRejectThisCompanyInfoChange')) : (this.firmAuditData.remarks==='0'?this.$t('hint.ApproveRegistrationC'):this.$t('hint.ApproveChangeOfInformationC')),
        showClose: false,
        closeOnClickModal:false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      }).then(() => {
        auditFirm(this.firmAuditData).then(res => {
          console.log(res);
          if (res.code === 0) {
            this.$notify({
              title: this.$t("hint.Success"),
              message: this.$t("hint.OperationSuccess"),
              type: "success",
              duration: 2000
            });
            this.$router.push({ path: "/firmAudit" });
          } else {
            this.$notify({
              title: this.$t("hint.Fail"),
              message: this.$t("hint.OperationFail"),
              type: "error",
              duration: 2000
            });
          }

        })
      }).catch(()=>{});
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
